<template>
	<view>
		<cover-view class="remind">
			<view class="remind-header">
				<view class="left">
					<image class="menu-logo" src="@/static/watermark-camera/logo3.png"></image>
				</view>
				<view class="right" @tap="handleInput">
					<text style="font-size: 20rpx;margin-left: 20rpx;color: #909399;">{{waterInfo.projName}}</text>
				</view>
			</view>
			<view style="padding: 10rpx;">
				<view style="display: flex;flex-direction: row;width: 440rpx;">
					<text style="font-size: 16rpx;">施工内容：</text>
					<text style="font-size: 16rpx;color: #909399;" @tap="handleInput">{{waterInfo.constructionContent}}</text>
				</view>
				<view style="display: flex;flex-direction: column;">
					<text class="remind-text remind-time" style="">拍摄时间：{{ waterInfo.time }}</text>
					<text class="remind-text remind-address" style="">天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气：{{ waterInfo.weatherDesc }}</text>
					<text class="remind-text remind-address" style="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：{{ waterInfo.address }}</text>
					<text class="remind-text remind-address" style="">方&nbsp;&nbsp;位&nbsp;&nbsp;角：{{ waterInfo.alpha }}</text>
				</view>
			</view>
			<view class="remind-bottom">
				<text class="remind-text" style="color: #fff;">施工单位：{{ waterInfo.consUnit }}</text>
			</view>
		</cover-view>
		<!-- 添加水印信息 -->
		<up-popup :show="popupshow" mode="bottom" @close="close">
			<WatermarkInfo @handleClose="handleClose" :address="waterInfo.address" :userInfo="userInfo"></WatermarkInfo>
		</up-popup>
	</view>
</template>

<script>
	import WatermarkInfo from "@/components/watermarkCamera/watermarkInfo.vue";
	export default {
		name:'WatermarkEng',
		props:['waterInfo','userInfo'],
		components: {
		  WatermarkInfo,
		},
		data() {
			return {
				popupshow:false,
			}
		},
		methods: {
			handleInput() {
				this.popupshow = !this.popupshow;
			},
			close() {
				this.popupshow = false;
			},
			handleClose(params){
				if(params) {
					this.waterInfo.projId = params.projId;
					this.waterInfo.projName = params.projName;
					this.waterInfo.constructionContent = params.content;
					this.$emit('custom-waterInfo', params);
				}
				this.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.remind {
		position: absolute;
		//top: 80rpx;
		left: 20rpx;
		bottom: 520rpx;
		width: 450rpx;
		z-index: 100;
		border-radius: 10rpx;
		//padding: 10rpx;
		background-color: #e1e3e5;
		opacity: 0.8;
		
		.remind-header {
			display: flex;
			flex-direction: row;
			height: 80rpx;
			.left {
				width: 120rpx;
				background-color: #fff;
				border-radius: 10rpx 0 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.menu-logo {
					width: 80rpx;
					height: 36rpx;
				}
			}
			.right {
				width: 330rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #90d4bb;
				border-radius: 0 10rpx 0 0;
			}
		}
		.remind-bottom {
			display: flex;
			background-color: #90d4bb;
			border-radius: 0 0 10rpx 10rpx;
			padding: 10rpx;
		}
	}
	 
	.remind-text {
		color: #2c2c2c;
		width: 400rpx;
		font-size: 16rpx;
	}
	 
	.remind-name {
		//font-size: 30rpx;
		width: 440rpx;
	}
	 
	.remind-address {
		//font-size: 30rpx;
		width: 440rpx;
		margin-top: 5rpx;
	}
	 
	.remind-time {
		//font-size: 30rpx;
		width: 440rpx;
		margin-top: 5rpx;
	}
</style>
